<template>
  <div>
    <h3>基本操作练习</h3>
    <input v-model.trim="number">
    <b>
      <div v-if="number>10">{{number}}</div>
      <div v-else="number<10">value is so small</div>
    </b>
    <div id="example-6">
        <select v-model="selected" multiple style="width: 50px;">
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
        <br>
        <span>Selected: {{ selected }}</span>
      </div>
      <button @click="add_number" >提交按钮</button>
  </div>

</template>
<script>
    export default {
        data() {
            return {
                number: "",
                selected: []
            }
        },
        watch: {
            number: function() {
                if (this.number > 10) {
                    alert("very good")
                }
            }
        },
        methods: {
            add_number: function() {
                this.number++
            }
        }

    }
</script>